<template>
	<div class="doc_pc_components_Ellipsis">
		<div>
			<Ellipsis
				content="AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。"
				class="doc-Ellipsis"
			/>
		</div>
		<div>
			<div class="doc-config">
				行数:<NumberInput
					v-model="row"
					:min="1"
					class="doc-input"
				/>
				<Radio
					v-model="enable"
					label="启用"
					:name="true"
					class="doc-Radio"
				/>
				<Radio
					v-model="enable"
					label="禁用"
					:name="false"
					class="doc-Radio"
				/>
			</div>
			<Ellipsis
				content="AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。"
				:rows="row"
				:disabled="!enable"
				class="doc-Ellipsis"
			/>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {Ellipsis,NumberInput,Radio} from 'powerful-ui/pc-default';

const row=shallowRef(3);
const enable=shallowRef(true);
</script>

<style lang="scss">
.doc_pc_components_Ellipsis{
	>div{
		margin:20px;
	}
	.doc-Ellipsis{
		width:200px;
	}
	.doc-config{
		display:flex;
		align-items:center;
		margin-bottom:10px;
	}
	.doc-input{
		width:60px;
		margin-right:20px;
	}
	.doc-Radio{
		margin:0 10px;
	}
}
</style>